<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
    <title>Insert title here</title>
</head>
<style type="text/css">
    body {
        width: 370px;
        margin: 0 auto;
        background: #F3F3F3;
    }
    ul {
        margin-left: 10px;
        margin-right: 15px;
        padding: 0px;
    }
    li {
        list-style: none;
        height: 27px;
        width: 100%;
        border-bottom: 1px solid #ccc;
       background-size:15px 15px;
       padding-left: 0px;
    }
    li  img{
    	height: 15px;
    	height: 15px;
    	margin-top: 8px;
        margin-left: 5px;
    }
    li span{
      font-size: 13px;
      line-height:27px;
    }
    .title {
    font-size: 14px;
    padding-top: 8px;
    }
    .userinfo {
    	height: 47px;
    	
    }
    .userinfo img {
    	height: 37px;
    	width: 37px;
    	float: left;
    	margin-top: 5px;
    }
    .userinfo span{
    	font-size: 14px;
    	margin-left:10px;
    	margin-top:0px;
    }
    .userinfo span.turnRight{
    	margin-right: 15px;
    }
    .turnRight{
    		float: right;
    }
    .content {
        width: 100%;
        height: 100%;
        background: #fff;
        margin-top:10px;
    }
    .content img {
        height: 100%;
        width: 100%;
    }
    .location{
         height: 28px;
    	 margin-right: 15px;
    	 margin-left: 15px;
    	 border-top:1px solid #ccc;
    }
 .location  img{
     height: 10px;
     width: 10px;
 }
</style>
<body>
<div class="userinfo">
    <img alt=""  src="avatar.jpg">

    <div class="title"><span>我在京都遇见你</span></div>

    <span  style="font-size:11px;">吴彦祖</span>

    <span class="turnRight">2015-01-01</span>
</div>
<ul>
    <li><img src="location.png"><span class="turnRight">京都</span></li>
    <li><img src="calendar.png"><span class="turnRight">5月</span></li>
    <li><img src="day.png"> <span  class="turnRight">7天</span></li>
    <li><img src="cost.png"><span class="turnRight">1000元</span></li>
    <li><img src="cost.png"><span class="turnRight">奢侈游</span></li>
</ul>
<div>
    <div class="content">
        <img src="1.jpg">
        <p style="font-size:13px;margin-left:15px;margin-bottom:30px;margin-right:15px;">所有的故事已经结束</p>
        <div class="location">
            <img src="location.png">
            <span style="font-size:10px;">京都</span>
        </div>
    </div>
    <div class="content">
        <img src="2.jpg">

        <p style="font-size:13px; margin-bottom:30px;">所有的故事已经结束</p>
        <div class="location">
            <img src="location.png">
            <span  style="font-size:10px;">京都</span>
            <div   id="star">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function loadJson(json) {
        $("#title").html(json.sharePhoto.sharePhotoName);
        $("#placeName").html(json.sharePhoto.placeName);
        var tempFn = doT.template($("#images_template").html());
        var resultText = tempFn(json);
        $("#images").html(resultText);
        $("#star").append(buildStar(json.scenic.score));
    };
    function buildStar(count) {
        var star = "<img src='../images/star@3x.png' width='3%'>";
        var unStar = "<img src='../images/starline@3x.png' width='3%'>";
        var starCount = count;
        var unStarCount = 5 - count;
        var starHtml = "";
        for(var i = 0; i < starCount; i ++) {
            starHtml += star;
        }
        for(var i = 0; i < unStarCount; i++) {
            starHtml += unStar;
        }
        return starHtml + "&nbsp;&nbsp;&nbsp;" + "<span style='font-size: 30px; margin-top: -20px;'>"+ count + "</span>";
    }
</script>
</body>
</html>